
import React, { Component } from 'react';
import { Grid } from 'antd-mobile'
import { get_Group_Data } from '../utils/http_biz.js'

// const data1 = Array.from(new Array(4)).map((_val, i) => ({
//     icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
//     text: `name${i}`,
//     desc: "归属的感觉"
// }));

class Group extends Component {
    /*
    {
            "id": 1,
            "title": "家住回龙观",
            "desc": "归属的感觉",
            "imgSrc": "/img/groups/1.png"
        }
        */
    state = {
        data1: []
    }

    // 1.0 在didMount钩子函数中请求后台接口拿到租房小组的数据
    async componentDidMount() {
        let { body } = await get_Group_Data()
        // 修改state属性data1，此时就会触发render重新执行
        this.setState({ data1: body })

    }

    render() {
        return (<div>
            {/* 标题区域 */}
            <div className="groupTitle">
                <p className="bold">租房小组</p>
                <p className="right">更多</p>
            </div>
            {/* 宫格区域 */}
            {/* Grid的data属性接受一个数组，内部会自动遍历生成这个数组 */}
            <Grid data={this.state.data1}
                columnNum={2}  // 设置宫格每一行显示2个格子
                itemStyle={{ maxHeight: '86px' }} // 这里注意设置itemStyle的maxHeight为86px才有用
                // renderItem方法负责渲染每一个宫格项的结构，数据通过dataItem传入，dataItem就是data1数组的每一项
                renderItem={dataItem => (
                    // 自定义宫格每个格子的内容静态结构
                    <div className="grid-item" >
                        <div className="title">
                            <h3>{dataItem.title}</h3>
                            <p>{dataItem.desc}</p>
                        </div>
                        <div>
                            <img src={`https://api-haoke-web.itheima.net${dataItem.imgSrc}`} alt="" />
                        </div>
                    </div>
                )}
            />
        </div>);
    }
}

export default Group;